<script>
import Layout from "../../layouts/main";
import PageHeader from "@/components/page-header";

import Stat from "./widget";
import RevenueAnalytics from "./revenue";
import SalesAnalytics from "./sales-analytics";
import EarningReport from "./earning";
import RecentActivity from "./recent-activity";
import Transaction from "./transaction";
import transactionDataMark from "./transactionDataMark";
import transactionResources from "./transactionResources";
// import { collectData } from "@/api/home";
/**
 * Dashboard component
 */
export default {
  components: {
    Layout,
    PageHeader,
    Stat,
    RevenueAnalytics,
    SalesAnalytics,
    EarningReport,
    RecentActivity,
    Transaction,
    transactionDataMark,
    transactionResources,
  },
  data() {
    return {
      title: "系统总览",
      items: "更新于50分钟前",
      activeName: "数据采集状态",
      splineAreaChart: {
        "series": [
          {
            "name": "数据采集",
            "data": [34, 40, 28, 52, 42, 109, 100],
          },
          {
            "name": "信源状态",
            "data": [32, 60, 34, 46, 34, 52, 41],
          },
        ],
        chartOptions: {
          legend: {
            position: "top",
            horizontalAlign: "right",
            floating: true,
          },
          chart: {
            stacked: false,
            toolbar: {
              show: false,
            },
            animations: {
              enabled: false,
            },
          },
          dataLabels: {
            enabled: false,
          },
          stroke: {
            curve: "smooth",
            width: 3,
          },
          colors: ["#556ee6", "#34c38f"],
          xaxis: {
            categories: [
              "00:00",
              "01:30",
              "02:30",
              "03:30",
              "04:30",
              "05:30",
              "06:30",
            ],
          },
          grid: {
            borderColor: "#f1f1f1",
          },
        },
      },
      linewithDataChart: {
        chartOptions: {
          chart: {
            zoom: {
              enabled: false,
            },
            toolbar: {
              show: false,
            },
            animations: {
              enabled: false,
            },
          },
          colors: ["#556ee6", "#34c38f"],
          dataLabels: {
            enabled: true,
          },
          stroke: {
            width: [3, 3],
            curve: "straight",
          },
          grid: {
            row: {
              colors: ["transparent", "transparent"], // takes an array which will be repeated on columns
              opacity: 0.2,
            },
            borderColor: "#f1f1f1",
          },
          markers: {
            style: "inverted",
            size: 6,
          },
          xaxis: {
            categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
            
          },
          legend: {
            position: "top",
            horizontalAlign: "right",
            floating: true,
          },
          responsive: [
            {
              breakpoint: 600,
              options: {
                chart: {
                  toolbar: {
                    show: false,
                  },
                },
                legend: {
                  show: false,
                },
              },
            },
          ],
        },
        series: [
          {
            name: "资讯",
            data: [26, 24, 32, 36, 33, 31, 33],
          },
          {
            name: "招标",
            data: [14, 11, 16, 12, 17, 13, 12],
          },
        ],
      },
      dashedLineChart: {
        series: [
          {
            name: "CPU",
            data: [45, 52, 38, 24, 33, 26, 21],
          },
          {
            name: "内存",
            data: [36, 42, 60, 42, 13, 18, 29],
          },
          {
            name: "磁盘",
            data: [89, 56, 74, 98, 72, 38, 64],
          },
        ],
        chartOptions: {
          chart: {
            zoom: {
              enabled: false,
            },
            toolbar: {
              show: false,
            },
            animations: {
              enabled: false,
            },
          },
          colors: ["#556ee6", "#f46a6a", "#34c38f"],
          dataLabels: {
            enabled: false,
          },
          stroke: {
            width: [3, 4, 3],
            curve: "straight",
            dashArray: [0, 8, 5],
          },
          title: {
            text: "",
            align: "left",
          },
          markers: {
            size: 0,

            hover: {
              sizeOffset: 6,
            },
          },
          legend: {
            position: "top",
            horizontalAlign: "right",
            floating: true,
          },
          xaxis: {
            categories: [
              "01 Jan",
              "02 Jan",
              "03 Jan",
              "04 Jan",
              "05 Jan",
              "06 Jan",
              "07 Jan",
            ],
          },
          tooltip: {
            y: [
              {
                title: {
                  formatter: function (val) {
                    return val;
                  },
                },
              },
              {
                title: {
                  formatter: function (val) {
                    return val;
                  },
                },
              },
              {
                title: {
                  formatter: function (val) {
                    return val;
                  },
                },
              },
            ],
          },
          grid: {
            borderColor: "#f1f1f1",
          },
        },
      },
      selmenu: 0,
      SecondarymenuList: [
        {
          name: "数据采集状态",
          icon: "el-icon-coin",
        },
        {
          name: "数据标记状态",
          icon: "el-icon-price-tag",
        },
        {
          name: "计算资源状态",
          icon: "el-icon-position",
        },
      ],
      dataDistribute: {},
      statData2: [],
      statData: [
        {
          title: "数据采集总量",
          icon: "ri-stack-line",
          value: "2.3亿条",
          subvalue: "6.8%",
          text: "上周增加",
        },
        {
          title: "24小时采集数据",
          icon: "ri-store-2-line",
          value: "270,5条",
          subvalue: "2.7%",
          text: "昨日增加",
        },
        {
          title: "数据存储容量(GB)",
          icon: "ri-briefcase-4-line",
          value: "1,400GB",
          subvalue: "6.8%",
          text: "上周增加",
        },
      ],
    };
  },
  methods: {
    changeMenu(value) {
      if (this.selmenu != value) {
        this.selmenu = value;
      }
    },
    // async collectData() {
    //   const res = await collectData();
    //   if (res.code === "0") {
    //     for (const key in JSON.parse(res.data).mainPage_1) {
    //       this.statData2.push(JSON.parse(res.data).mainPage_1[key]);
    //     }
    //     for (let i = 0; i < this.statData.length; i++) {
    //       this.statData[i].value = this.statData2[i];
    //     }
    //     console.log("数据", this.statData);
    //     this.dataDistribute = JSON.parse(res.data).mainPage_2;
    //     console.log("数据", this.dataDistribute);
    //   }else{
    //     console.log("请求失败")
    //   }
    // },
    getDay(day){
      var today = new Date();
      var targetday_milliseconds=today.getTime() + 1000*60*60*24*day;
      today.setTime(targetday_milliseconds); //注意，这行是关键代码
      var tMonth = today.getMonth();
      var tDate = today.getDate();
      tMonth = this.doHandleMonth(tMonth + 1);
      tDate = this.doHandleMonth(tDate);
      return tMonth+"-"+tDate;
    },
    doHandleMonth(month){
      var m = month;
      if(month.toString().length == 1){
        m = "0" + month;
      }
      return m;
    },
    handleClick() {
      console.log("触发tabs标签页切换，当前标签页：" + this.activeName);
    },
  },
  created() {
    let arr = [-6,-5,-4,-3,-2,-1,0]
    let arr_ = []
    for (let i = 0; i < arr.length; i++) {
      arr_.push(this.getDay(arr[i]))
    }
    this.splineAreaChart.chartOptions.xaxis.categories = arr_;
    this.linewithDataChart.chartOptions.xaxis.categories = arr_;
    this.dashedLineChart.chartOptions.xaxis.categories = arr_;
    // this.collectData();
  },
};
</script>

<template>
  <Layout>
    <PageHeader :title="title" :items="items" />
    <div class="row">
      <div class="col-xl-8">
        <stat :statData="statData"></stat>
        <RevenueAnalytics />
      </div>
      <div class="col-xl-4">
        <SalesAnalytics :dataDistribute="dataDistribute" />
        <EarningReport />
      </div>
    </div>
    <div class="row">
      <div class="col-lg-4">
        <RecentActivity type="1" />
      </div>
      <div class="col-lg-4">
        <RecentActivity type="2" />
      </div>
      <div class="col-lg-4">
        <RecentActivity type="3" />
      </div>
    </div>
    <div class="row">
      <div class="col-lg-12">
        <div class="card" style="margin-bottom: 0">
          <div class="card-body">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="数据采集状态" name="数据采集状态">
                <div>
                  <h4 class="card-title mb-4 bottom_chart_title">
                    7日数据采集与信源状态走势分析
                  </h4>
                  <apexchart
                    class="apex-charts"
                    height="300"
                    type="area"
                    dir="ltr"
                    :series="splineAreaChart.series"
                    :options="splineAreaChart.chartOptions"
                  ></apexchart>
                </div>
              </el-tab-pane>
              <el-tab-pane label="数据标记状态" name="数据标记状态">
                <div v-if="activeName=='数据标记状态'">
                  <h4 class="card-title mb-4 bottom_chart_title">
                    7日数据表及装填走势分析
                  </h4>
                  <apexchart
                    class="apex-charts"
                    height="300"
                    type="line"
                    dir="ltr"
                    :series="linewithDataChart.series"
                    :options="linewithDataChart.chartOptions"
                  ></apexchart>
                </div>
              </el-tab-pane>
              <el-tab-pane label="计算资源状态" name="计算资源状态">
                <div v-if="activeName=='计算资源状态'">
                  <h4 class="card-title mb-4 bottom_chart_title">
                    7日计算资源状态走势分析
                  </h4>
                  <apexchart
                    class="apex-charts"
                    height="300"
                    type="line"
                    dir="ltr"
                    :series="dashedLineChart.series"
                    :options="dashedLineChart.chartOptions"
                  ></apexchart>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
        <Transaction v-if="activeName == '数据采集状态'" />
        <transactionDataMark v-if="activeName == '数据标记状态'" />
        <transactionResources v-if="activeName == '计算资源状态'" />
      </div>
    </div>
  </Layout>
</template>
<style lang="scss" scoped>
.Secondarymenu {
  display: flex;
  margin-bottom: 24px;
  position: relative;
  div {
    color: #999999;
    font-size: 15px;
    font-weight: 600;
    padding-bottom: 5px;
    margin-right: 48px;
    cursor: pointer;
  }
  .selmenu {
    color: #5664d2;
    border-bottom: 2px solid #5664d2;
  }
}
.bottom_chart_title{
  color: #74788d;
  font-size: 12px;
  text-align: center;
}
::v-deep .el-tabs__item.is-active{
  color: #5664d2;
}
::v-deep .el-tabs__active-bar{
  background-color: #5664d2;
}
::v-deep .el-tabs__item.is-top:hover{
  color: #5664d2;
}
</style>